import React, {Component} from 'react'
import {View, Text, Image, TextInput, StyleSheet, Button,ImageBackground,TouchableOpacity} from 'react-native'
import {connect} from 'react-redux'
import {login} from '../../redux/actions/user'
import Icon from 'react-native-vector-icons/Ionicons'
import {screenWidth,screenHeight,BLUE, borderBottomLine, RED, GREY} from '../../config/styles'
class PersonalLogin extends Component {
    constructor (props) {
        super(props);
        this.state = {
            username: '',
            password: ''
        }
    }

    login () {
        this.props.dispatch(login(this.state.username, this.state.password))
    }

    render () {
        return (
            <ImageBackground style={{width:screenWidth,flex:1}} source={require('../../assets/images/bgimg.jpeg')}>
                <View style={{marginTop:-20,flex:1,backgroundColor:'rgba(0,0,0,0.5)',justifyContent: 'center',paddingLeft:30,paddingRight:30}}>
                    <View style={styles.image_container}>
                        <Image
                            source={require('../../assets/images/app-icon.png')}
                            style={{height: 80, width: 80}}
                        />
                    </View>
                    <View style={styles.text_input_title}><Text style={{color:'#fff'}}>Username</Text></View>
                    <View style={{flexDirection: 'row'}}>
                        <View style={[styles.text_input_container,{flex: 1, flexDirection: 'row'}]}>
                            <TextInput
                                underlineColorAndroid="transparent"
                                style={styles.text_input_style}
                                onChangeText={(txt) => this.setState({username: txt})}
                            />
                        </View>
                    </View>
                    <View style={styles.text_input_title}><Text style={{color:'#fff'}}>Password</Text></View>
                    <View style={{flexDirection: 'row'}}>
                        <View style={[styles.text_input_container,{flex: 1, flexDirection: 'row'}]}>
                            <TextInput
                                underlineColorAndroid="transparent"
                                style={styles.text_input_style}
                                //密文
                                secureTextEntry={true}
                                onChangeText={(txt) => this.setState({password: txt})}
                            />
                        </View>
                    </View>

                <View style={{alignItems: 'center',}}>
                    <TouchableOpacity
                        onPress={() => {this.login()}}
                        style={styles.login_btn}
                    >
                        <Text style={{color:'#fff',fontSize:18}}>{this.props.user.status == 'logging'?'Logging……':'LOGIN'}</Text>

                    </TouchableOpacity>
                </View>

                </View>
            </ImageBackground>
        )
    }
}

const styles = StyleSheet.create({
    image_container: {
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom:30
    },

    text_input_container: {
        flex: 0.8, 
        justifyContent: 'flex-end', 
        //borderBottomWidth: 0.5,
        width:320


    },
    text_input_title: {
        marginTop:14,
        marginBottom:14,
        marginLeft:20
    },

    text_input_style: {
        width:320,padding: 0, flex: 1,backgroundColor:'rgba(240,248,255,0.5)',borderRadius:50,height:50,fontSize:20,color:'#fff',paddingLeft:20
    },
    login_btn:{
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: BLUE,
        borderRadius: 150,
        marginTop:35,
        marginBottom:14,
        padding:15,
        width:300,
    }
  });

const mapStateToProps = (state) => {
    return {
        user: state.user
    }
}

export default connect(mapStateToProps)(PersonalLogin)